<script setup lang="ts">
import { ref } from 'vue'
import { usersStore } from '@/stores/users'
import { usersSessionStore } from '@/stores/usersSession'
import LoginLeft from '../../components/LoginLeft.vue'
import { db } from '../../db/db'

const form = ref({ username: '', password: '', rememberMe: false })
const formErr = ref({
  username: false,
  realName: false,
  password: false,
  rememberMe: false
})
const formMsg = ref({ username: '', password: '', rememberMe: '' })

const globalErrMsg = ref('')

function checkUsername() {
  formErr.value.username = false
  formMsg.value.username = ''
  if (form.value.username === '') {
    formErr.value.username = true
    formMsg.value.username = '账号不能为空'
    return false
  }
  return true
}

function checkPassword() {
  formErr.value.password = false
  formMsg.value.password = ''
  if (form.value.password === '') {
    formErr.value.password = true
    formMsg.value.password = '密码不能为空'
    return false
  }
  return true
}

const submitForm = async () => {
  if (!checkUsername()) {
    return false
  }

  if (!checkPassword()) {
    return false
  }

  globalErrMsg.value = ''

  const users = await db.users.where('username').equals(form.value.username).toArray()

  if (users.length <= 0) {
    globalErrMsg.value = '账号不存在'
    return false
  }

  if (users[0].password !== form.value.password) {
    globalErrMsg.value = '账号或密码错误'
    return false
  }

  if (users[0].enabled == 0) {
    globalErrMsg.value = '账号已被注销'
    return false
  }

  const localUsers = usersStore()
  localUsers.setUsers({
    username: users[0].username,
    password: users[0].password,
    enabled: users[0].enabled,
    realName: users[0].realName,
    avatar: users[0].avatar,
    joinDate: users[0].joinDate,
    usersTypeId: users[0].usersTypeId,
    rememberMe: form.value.rememberMe
  })

  const localSession = usersSessionStore()
  localSession.setUsers({
    username: users[0].username,
    password: users[0].password,
    enabled: users[0].enabled,
    realName: users[0].realName,
    avatar: users[0].avatar,
    joinDate: users[0].joinDate,
    usersTypeId: users[0].usersTypeId,
    rememberMe: form.value.rememberMe
  })

  window.location.href = "/"
}
</script>

<template>
  <!-- Main -->
  <div class="d-md-flex h-md-100 align-items-center">
    <LoginLeft />
    <div class="col-md-6 p-0 bg-white h-md-100 loginarea">
      <div class="d-md-flex align-items-center h-md-100 p-5 justify-content-center">
        <form class="border rounded p-5" @submit.prevent="submitForm">
          <h3 class="mb-4 text-center">登 录</h3>
          <div class="form-group">
            <input type="text" class="form-control" :class="formErr.username ? 'is-invalid' : ''"
              v-model.trim="form.username" placeholder="账号" @keyup.enter="submitForm" v-focus />
            <div class="invalid-feedback">
              {{ formMsg.username }}
            </div>
          </div>
          <div class="form-group">
            <input type="password" class="form-control" :class="formErr.password ? 'is-invalid' : ''"
              v-model.trim="form.password" placeholder="密码" @keyup.enter="submitForm" />
            <div class="invalid-feedback">
              {{ formMsg.password }}
            </div>
          </div>
          <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="rm" v-model="form.rememberMe" />
            <label class="form-check-label small text-muted" for="rm">记住我</label>
          </div>
          <div class="text-center text-danger mb-3">
            {{ globalErrMsg }}
          </div>
          <button type="submit" class="btn btn-success btn-round btn-block shadow-sm">登 录</button>
          <small class="d-block mt-4 text-center">
            <RouterLink to="/web/forget-password" class="text-gray mt-3">忘记密码？</RouterLink>
            <RouterLink to="/web/register">注册</RouterLink>
          </small>
        </form>
      </div>
    </div>
  </div>
  <!-- End Main -->
</template>
